<template>
  <uni-popup ref="popup" type="bottom">
    <view class="jibieInfo">
      <view class="flex flex-align flex-cneter">
        <view class="bg-hei"></view>
      </view>
      <view class="header flex flex-align flex-center">
        <view class="homeTitle"><text>会员介绍</text></view>
      </view>
      <view class="jieshao">
        <view class="list"> 1、会员成长值由用户的购物消费额决定</view>
        <view class="list"> 2、会员等级由低到高依次为V0非会员、V1青铜会员、V2白银会员、V3黄金会员、V4钻石会员、V5至尊会员，共6级</view>
        <view class="list"> 3、会员从获得之日起有效期30天，相关的升级、保级、降级规则：</br>
          （1）升级：这里是升级介绍这里是升级介绍，这里是升级介绍这里是升级介绍</br>
          （2）保级：这里是保级介绍这里是保级介绍，这里是保级介绍这里是保级介绍这里是保级介绍，这里是保级介绍</br>
          （3）降级：这里是降级介绍这里是降级介绍，这里是降级介绍这里是降级介绍
        </view>
      </view>
      <view class="header flex flex-align flex-center">
        <view class="homeTitle jibiebiao"><text>会员等级表单</text></view>
      </view>
      <view class="jibie-table">
        <uni-table emptyText="暂无更多数据" >
          <uni-tr class="uni-tr">
            <uni-th class="uni-th" align="center" width="170rpx">等级</uni-th>
            <uni-th class="uni-th" align="center" width="170rpx">升级额度</uni-th>
            <uni-th class="uni-th" align="center" width="170rpx">保级额度</uni-th>
            <uni-th class="uni-th" align="center" width="170rpx">周期</uni-th>
          </uni-tr>
          <uni-tr class="uni-trs">
            <uni-td align="center">非会员</uni-td>
            <uni-td align="center">10</uni-td>
            <uni-td align="center">5</uni-td>
            <uni-td align="center">1</uni-td>
          </uni-tr>
          <uni-tr class="uni-trs">
            <uni-td align="center">青铜会员</uni-td>
            <uni-td align="center">10</uni-td>
            <uni-td align="center">5</uni-td>
            <uni-td align="center">1</uni-td>
          </uni-tr>
          <uni-tr class="uni-trs">
            <uni-td align="center">白银会员</uni-td>
            <uni-td align="center">10</uni-td>
            <uni-td align="center">5</uni-td>
            <uni-td align="center">1</uni-td>
          </uni-tr>
          <uni-tr class="uni-trs">
            <uni-td align="center">黄金会员</uni-td>
            <uni-td align="center">10</uni-td>
            <uni-td align="center">5</uni-td>
            <uni-td align="center">1</uni-td>
          </uni-tr>
          <uni-tr class="uni-trs">
            <uni-td align="center">钻石会员</uni-td>
            <uni-td align="center">10</uni-td>
            <uni-td align="center">5</uni-td>
            <uni-td align="center">1</uni-td>
          </uni-tr>
          <uni-tr class="uni-trs">
            <uni-td align="center">至尊会员</uni-td>
            <uni-td align="center">10</uni-td>
            <uni-td align="center">5</uni-td>
            <uni-td align="center">1</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
    
  </uni-popup>
</template>



<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['submit', 'update:show'])
const qrCodeUrl = ref ('');
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}


function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.jibieInfo{background: #fff;border-radius: 20rpx 20rpx 0 0;padding:40rpx 30rpx;
  .bg-hei{width: 56rpx;height: 8rpx;border-radius: 8rpx;background: #323233;margin: 0 auto;}
  .jieshao{background: #F5F6F7;border-radius: 20rpx;padding: 20rpx;
   .list{margin-top: 10rpx;font-size: 24rpx;color: #646566;}
  }
  .jibiebiao{margin-top: 30rpx;}
  .jibiebiao::after{width: 180rpx;}
  .jibie-table{
    .uni-tr{background:#FE7431;
      .uni-th{color: #fff;}
    }
    .uni-trs{background:#FFEBE2;
    }
  }
}
</style>
